<!-- 消息中心 -->
<template>
  <div>
    <devArticle>
      <div style="background: #f8f8f9">
        <Row>
          <!-- 左侧 -->
          <Col span="16">
          <!-- 左上 -->
          <Card>
            <p slot="title">收件箱</p>
            <Table border ref="selection" :columns="columns1" :data="data1"></Table>
            <Row type="flex" justify="space-between" style="margin-top: 10px">
              <Col span="8" style="margin-top: 10px">
              <Button type="primary">标记已读</Button>
              <Button type="error">删除</Button>
              </Col>
              <Col span="8">
              <Page :total="100" show-total />
              </Col>
            </Row>
          </Card>
          <!-- 左下 -->
          <Card style="margin-top: 10px">
            <p slot="title">发件箱</p>
            <Table border ref="selection" :columns="columns2" :data="data2"></Table>
            <Row type="flex" justify="space-between" style="margin-top: 10px">
              <Col span="8">
              <Button type="error">删除</Button>
              </Col>
              <Col span="8">
              <Page :total="100" show-total />
              </Col>
            </Row>
          </Card>
          </Col>
          <!-- 右侧 -->
          <Col span="6" offset="2">
          <Card style="height: 100%">
            <p slot="title">联系人</p>
            <Row>
              <Col span="24">
              <Input search enter-button="搜索" placeholder="请输入关键字" style="width:90%" />
              </Col>
            </Row>
            <table width="100%" cellspacing="0" cellpadding="0" style="margin-top: 10px">
            	<tr>
            		<th>
            			联系人30人
            		</th>
            	</tr>
            	<tr>
            		<td class="leftbgc" style="text-align:left"> 
            			<Tree :data="data3"></Tree>
            		</td>
            	</tr>
            </table>
          </Card>
          </Col>
        </Row>
      </div>
    </devArticle>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns1: [{
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '发件人',
          key: 'person1',
          align: 'center'
        },
        {
          title: '主题',
          key: 'subjec1',
          align: 'center'
        },
        {
          title: '内容',
          key: 'content1',
          align: 'center'
        },
        {
          title: '时间',
          key: 'time1',
          align: 'center'
        }
      ],
      data1: [{
          person1: '张三',
          subjec1: 'XXXX',
          content1: 'xxxxxxx',
          time1: '2018-8-31'
        },
        {
          person1: '张三',
          subjec1: 'XXXX',
          content1: 'xxxxxxx',
          time1: '2018-8-31'
        },
        {
          person1: '张三',
          subjec1: 'XXXX',
          content1: 'xxxxxxx',
          time1: '2018-8-31'
        },
        {
          person1: '张三',
          subjec1: 'XXXX',
          content1: 'xxxxxxx',
          time1: '2018-8-31'
        },
        {
          person1: '张三',
          subjec1: 'XXXX',
          content1: 'xxxxxxx',
          time1: '2018-8-31'
        },
        {
          person1: '张三',
          subjec1: 'XXXX',
          content1: 'xxxxxxx',
          time1: '2018-8-31'
        },
        {
          person1: '张三',
          subjec1: 'XXXX',
          content1: 'xxxxxxx',
          time1: '2018-8-31'
        }
      ],
      columns2: [{
          type: 'selection',
          width: 60,
          align: 'center',
          align: 'center'
        },
        {
          title: '收件人',
          key: 'person2',
          align: 'center'
        },
        {
          title: '主题',
          key: 'subjec2',
          align: 'center'
        },
        {
          title: '内容',
          key: 'content2',
          align: 'center'
        },
        {
          title: '时间',
          key: 'time2',
          align: 'center'
        }
      ],
      data2: [{
          person2: '张三',
          subjec2: 'XXXX',
          content2: 'xxxxxxx',
          time2: '2018-8-31'
        },
        {
          person2: '张三',
          subjec2: 'XXXX',
          content2: 'xxxxxxx',
          time2: '2018-8-31'
        },
        {
          person2: '张三',
          subjec2: 'XXXX',
          content2: 'xxxxxxx',
          time2: '2018-8-31'
        },
        {
          person2: '张三',
          subjec2: 'XXXX',
          content2: 'xxxxxxx',
          time2: '2018-8-31'
        },
        {
          person2: '张三',
          subjec2: 'XXXX',
          content2: 'xxxxxxx',
          time2: '2018-8-31'
        },
        {
          person2: '张三',
          subjec2: 'XXXX',
          content2: 'xxxxxxx',
          time2: '2018-8-31'
        },
        {
          person2: '张三',
          subjec2: 'XXXX',
          content2: 'xxxxxxx',
          time2: '2018-8-31'
        }
      ],
      data3: [
                    {
                        title: '鑫安利中（北京）科技有限公司',
                        expand: true,
                        children: [
                            {
                                title: '总经理办',
                                expand: true,
                                children: [
                                    {
                                        title: '张三'
                                    },
                                    {
                                        title: '张三'
                                    }
                                ]
                            },
                            {
                                title: '总公室',                               
                                children: [
                                    {
                                        title: ''
                                    },
                                    {
                                        title: ''
                                    }
                                ]
                            },
                            {
                            	title: '技术部',
                            	expand: true,
                            	children: [{
                            		title: '张三'
                            	},
                            	{
                            		title: '张三'
                            	},
                            	{
                            		title: '张三'
                            	},
                            	{
                            		title: '张三'
                            	},
                            	{
                            		title: '张三'
                            	},
                            	{
                            		title: '张三'
                            	},
                            	{
                            		title: '张三'
                            	},
                            	{
                            		title: '张三'
                            	}
                            	]
                            },
                            {
                            	title: '业务部',
                            	expand: true,
                            	children: [{

                            	}]
                            }
                        ]
                    }
                ]
    }
  }
}

</script>
<style lang="less" src="./compents/My/card.less">
.leftbgc{
	background:#f8f8f9;
}
</style>
